import InfoCard, { InfoItem } from '@/components/InfoCard/index';
import { ExportOutlined, ImportOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Button, Card, Col, Input, Row, Space } from 'antd';
import React, { useEffect, useState } from 'react';
// 与后端约定的响应数据格式
interface TableItem {
  label1: string;
  tableItemList: InfoItem[];
}
const { Search } = Input;
const technologyRoute: React.FC = () => {
  const onCancel = () => {};
  const [tableList, setTableList] = useState<TableItem[]>([
    {
      label1: '高压喷淋TCA',
      tableItemList: [
        {
          label: '产品编号',
          value: 'S-2023-01',
        },
        {
          label: '工艺路线编号',
          value: 'B-00001',
        },
        {
          label: '工艺路线版本',
          value: 'V1.3.1',
        },
      ],
    },
    {
      label1: '高压喷淋TCA',
      tableItemList: [
        {
          label: '产品编号',
          value: 'S-2023-01',
        },
        {
          label: '工艺路线编号',
          value: 'B-00001',
        },
        {
          label: '工艺路线版本',
          value: 'V1.3.1',
        },
      ],
    },
  ]);
  // 注意 useEffect 最后一个参数 传递一个空数组 表示只执行一次
  useEffect(() => {
    const newArr = [];
    for (let index = 0; index < 10; index++) {
      newArr.push(tableList[0]);
    }
    setTableList([...tableList, ...newArr]);
  }, []);
  // 提交
  const onJumpAdd = () => {
    history.push('/technology/technologyRoute/technologyRouteSave');
  };
  const extraContent = (
    <Space>
      {/* 添加弹框 */}
      <Button onClick={onJumpAdd} type="primary">
        <PlusOutlined />
        添加
      </Button>
      <Button type="primary">
        <ImportOutlined />
        导入
      </Button>
      <Button type="primary">
        <ExportOutlined />
        导出
      </Button>
      <Search placeholder="请输入名称" onSearch={() => ({})} />
    </Space>
  );
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          padding: 16,
        }}
        extra={extraContent}
      >
        <div className="card-row-box">
          <Row gutter={[16, 16]}>
            {tableList.map((item: TableItem, index) => {
              return (
                <Col span={6} key={index}>
                  <InfoCard list={item.tableItemList} index={index + 1} title={item.label1} />
                </Col>
              );
            })}
          </Row>
        </div>
      </Card>
    </PageContainer>
  );
};

export default technologyRoute;
